﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:Arial, sans-serif">

<!-- #region Jssor Slider Begin -->

<!-- Generator: Jssor Slider Maker -->
<!-- Source: http://www.jssor.com/demos/different-size-photo-slider.slider -->

<!-- This demo works with jquery library -->

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jssor.slider-21.1.5.mini.js"></script>
<!-- use jssor.slider-21.1.5.debug.js instead for debug -->
<script>
    jQuery(document).ready(function ($) {
        $('#jssor_1,#lyby').width($(window).width());
        $('#jssor_1,#lyby').height($(window).height());
        var jssor_1_SlideshowTransitions = [
            {
                $Duration: 1200,
                $Zoom: 11,
                $Rotate: -1,
                $Easing: {$Zoom: $Jease$.$InQuad, $Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InQuad},
                $Opacity: 2,
                $Round: {$Rotate: 0.5},
                $Brother: {
                    $Duration: 1200,
                    $Zoom: 1,
                    $Rotate: 1,
                    $Easing: $Jease$.$Swing,
                    $Opacity: 2,
                    $Round: {$Rotate: 0.5},
                    $Shift: 90
                }
            },
            {
                $Duration: 1400,
                x: 0.25,
                $Zoom: 1.5,
                $Easing: {$Left: $Jease$.$InWave, $Zoom: $Jease$.$InSine},
                $Opacity: 2,
                $ZIndex: -10,
                $Brother: {
                    $Duration: 1400,
                    x: -0.25,
                    $Zoom: 1.5,
                    $Easing: {$Left: $Jease$.$InWave, $Zoom: $Jease$.$InSine},
                    $Opacity: 2,
                    $ZIndex: -10
                }
            },
            {
                $Duration: 1200,
                $Zoom: 11,
                $Rotate: 1,
                $Easing: {$Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InQuad},
                $Opacity: 2,
                $Round: {$Rotate: 1},
                $ZIndex: -10,
                $Brother: {
                    $Duration: 1200,
                    $Zoom: 11,
                    $Rotate: -1,
                    $Easing: {$Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InQuad},
                    $Opacity: 2,
                    $Round: {$Rotate: 1},
                    $ZIndex: -10,
                    $Shift: 600
                }
            },
            {
                $Duration: 1500,
                x: 0.5,
                $Cols: 2,
                $ChessMode: {$Column: 3},
                $Easing: {$Left: $Jease$.$InOutCubic},
                $Opacity: 2,
                $Brother: {$Duration: 1500, $Opacity: 2}
            },
            {
                $Duration: 1500,
                x: -0.3,
                y: 0.5,
                $Zoom: 1,
                $Rotate: 0.1,
                $During: {$Left: [0.6, 0.4], $Top: [0.6, 0.4], $Rotate: [0.6, 0.4], $Zoom: [0.6, 0.4]},
                $Easing: {
                    $Left: $Jease$.$InQuad,
                    $Top: $Jease$.$InQuad,
                    $Opacity: $Jease$.$Linear,
                    $Rotate: $Jease$.$InQuad
                },
                $Opacity: 2,
                $Brother: {
                    $Duration: 1000,
                    $Zoom: 11,
                    $Rotate: -0.5,
                    $Easing: {$Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InQuad},
                    $Opacity: 2,
                    $Shift: 200
                }
            },
            {
                $Duration: 1500,
                $Zoom: 11,
                $Rotate: 0.5,
                $During: {$Left: [0.4, 0.6], $Top: [0.4, 0.6], $Rotate: [0.4, 0.6], $Zoom: [0.4, 0.6]},
                $Easing: {$Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InQuad},
                $Opacity: 2,
                $Brother: {
                    $Duration: 1000,
                    $Zoom: 1,
                    $Rotate: -0.5,
                    $Easing: {$Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InQuad},
                    $Opacity: 2,
                    $Shift: 200
                }
            },
            {
                $Duration: 1500,
                x: 0.3,
                $During: {$Left: [0.6, 0.4]},
                $Easing: {$Left: $Jease$.$InQuad, $Opacity: $Jease$.$Linear},
                $Opacity: 2,
                $Outside: true,
                $Brother: {
                    $Duration: 1000,
                    x: -0.3,
                    $Easing: {$Left: $Jease$.$InQuad, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                }
            },
            {
                $Duration: 1200,
                x: 0.25,
                y: 0.5,
                $Rotate: -0.1,
                $Easing: {
                    $Left: $Jease$.$InQuad,
                    $Top: $Jease$.$InQuad,
                    $Opacity: $Jease$.$Linear,
                    $Rotate: $Jease$.$InQuad
                },
                $Opacity: 2,
                $Brother: {
                    $Duration: 1200,
                    x: -0.1,
                    y: -0.7,
                    $Rotate: 0.1,
                    $Easing: {
                        $Left: $Jease$.$InQuad,
                        $Top: $Jease$.$InQuad,
                        $Opacity: $Jease$.$Linear,
                        $Rotate: $Jease$.$InQuad
                    },
                    $Opacity: 2
                }
            },
            {
                $Duration: 1600,
                x: 1,
                $Rows: 2,
                $ChessMode: {$Row: 3},
                $Easing: {$Left: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                $Opacity: 2,
                $Brother: {
                    $Duration: 1600,
                    x: -1,
                    $Rows: 2,
                    $ChessMode: {$Row: 3},
                    $Easing: {$Left: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                }
            },
            {
                $Duration: 1600,
                x: 1,
                $Rows: 2,
                $ChessMode: {$Row: 3},
                $Easing: {$Left: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                $Opacity: 2,
                $Brother: {
                    $Duration: 1600,
                    x: -1,
                    $Rows: 2,
                    $ChessMode: {$Row: 3},
                    $Easing: {$Left: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                }
            },
            {
                $Duration: 1600,
                y: -1,
                $Cols: 2,
                $ChessMode: {$Column: 12},
                $Easing: {$Top: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                $Opacity: 2,
                $Brother: {
                    $Duration: 1600,
                    y: 1,
                    $Cols: 2,
                    $ChessMode: {$Column: 12},
                    $Easing: {$Top: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                }
            },
            {
                $Duration: 1200,
                y: 1,
                $Easing: {$Top: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                $Opacity: 2,
                $Brother: {
                    $Duration: 1200,
                    y: -1,
                    $Easing: {$Top: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                }
            },
            {
                $Duration: 1200,
                x: 1,
                $Easing: {$Left: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                $Opacity: 2,
                $Brother: {
                    $Duration: 1200,
                    x: -1,
                    $Easing: {$Left: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                }
            },
            {
                $Duration: 1200,
                y: -1,
                $Easing: {$Top: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                $Opacity: 2,
                $ZIndex: -10,
                $Brother: {
                    $Duration: 1200,
                    y: -1,
                    $Easing: {$Top: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                    $Opacity: 2,
                    $ZIndex: -10,
                    $Shift: -100
                }
            },
            {
                $Duration: 1200,
                x: 1,
                $Delay: 40,
                $Cols: 6,
                $Formation: $JssorSlideshowFormations$.$FormationStraight,
                $Easing: {$Left: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                $Opacity: 2,
                $ZIndex: -10,
                $Brother: {
                    $Duration: 1200,
                    x: 1,
                    $Delay: 40,
                    $Cols: 6,
                    $Formation: $JssorSlideshowFormations$.$FormationStraight,
                    $Easing: {$Top: $Jease$.$InOutQuart, $Opacity: $Jease$.$Linear},
                    $Opacity: 2,
                    $ZIndex: -10,
                    $Shift: -100
                }
            },
            {
                $Duration: 1500,
                x: -0.1,
                y: -0.7,
                $Rotate: 0.1,
                $During: {$Left: [0.6, 0.4], $Top: [0.6, 0.4], $Rotate: [0.6, 0.4]},
                $Easing: {
                    $Left: $Jease$.$InQuad,
                    $Top: $Jease$.$InQuad,
                    $Opacity: $Jease$.$Linear,
                    $Rotate: $Jease$.$InQuad
                },
                $Opacity: 2,
                $Brother: {
                    $Duration: 1000,
                    x: 0.2,
                    y: 0.5,
                    $Rotate: -0.1,
                    $Easing: {
                        $Left: $Jease$.$InQuad,
                        $Top: $Jease$.$InQuad,
                        $Opacity: $Jease$.$Linear,
                        $Rotate: $Jease$.$InQuad
                    },
                    $Opacity: 2
                }
            },
            {
                $Duration: 1600,
                x: -0.2,
                $Delay: 40,
                $Cols: 12,
                $During: {$Left: [0.4, 0.6]},
                $SlideOut: true,
                $Formation: $JssorSlideshowFormations$.$FormationStraight,
                $Assembly: 260,
                $Easing: {$Left: $Jease$.$InOutExpo, $Opacity: $Jease$.$InOutQuad},
                $Opacity: 2,
                $Outside: true,
                $Round: {$Top: 0.5},
                $Brother: {
                    $Duration: 1000,
                    x: 0.2,
                    $Delay: 40,
                    $Cols: 12,
                    $Formation: $JssorSlideshowFormations$.$FormationStraight,
                    $Assembly: 1028,
                    $Easing: {$Left: $Jease$.$InOutExpo, $Opacity: $Jease$.$InOutQuad},
                    $Opacity: 2,
                    $Round: {$Top: 0.5}
                }
            }
        ];

        var jssor_1_SlideshowTransitions = [
            {$Duration:700,$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}}
        ];

        var jssor_1_options = {
            $PauseOnHover : false,
            $AutoPlay: true,
            $FillMode: 5,
            $LazyLoading: 3,  //控制上下加载几个图片 懒加载
            $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1
            },
            $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
            }
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizing
        function ScaleSlider() {
//            $('#jssor_1,#lyby').width($(window).width());
//            $('#jssor_1,#lyby').height($(window).height());
//            var refHeight = jssor_1_slider.$Elmt.parentNode.clientHeight;
//            if (refHeight) {
//                jssor_1_slider.$ScaleHeight(refHeight);
//            }
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 1920);
                jssor_1_slider.$ScaleWidth(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }

        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>

<style>

    /* jssor slider bullet navigator skin 13 css */
    /*
    .jssorb13 div           (normal)
    .jssorb13 div:hover     (normal mouseover)
    .jssorb13 .av           (active)
    .jssorb13 .av:hover     (active mouseover)
    .jssorb13 .dn           (mousedown)
    */
    .jssorb13 {
        position: absolute;
    }

    .jssorb13 div, .jssorb13 div:hover, .jssorb13 .av {
        position: absolute;
        /* size of bullet elment */
        width: 21px;
        height: 21px;
        background: url('img/b13.png') no-repeat;
        overflow: hidden;
        cursor: pointer;
    }

    .jssorb13 div {
        background-position: -5px -5px;
    }

    .jssorb13 div:hover, .jssorb13 .av:hover {
        background-position: -35px -5px;
    }

    .jssorb13 .av {
        background-position: -65px -5px;
    }

    .jssorb13 .dn, .jssorb13 .dn:hover {
        background-position: -95px -5px;
    }
</style>


<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; overflow: hidden; visibility: hidden;">
    <!-- Loading Screen -->
    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
        <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
    </div>
    <div id="lyby" data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px;  overflow: hidden;">
        <div style="display: none;">
            <img data-u="image" src2="img/01.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/02.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/03.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/04.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/05.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/06.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/07.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/08.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/09.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/10.jpg"/>
        </div>
        <div style="display: none;">
            <img data-u="image" src2="img/11.jpg"/>
        </div>
        <a data-u="add" href="http://www.jssor.com/demos/different-size-photo-slider.slider" style="display:none">Different
            Size Photo Sldier</a>
    </div>
    <!-- Bullet Navigator -->
    <div data-u="navigator" class="jssorb13" style="bottom:16px;right:16px;" data-autocenter="1">
        <!-- bullet navigator item prototype -->
        <div data-u="prototype" style="width:21px;height:21px;"></div>
    </div>
</div>

<!-- #endregion Jssor Slider End -->
</body>
</html>
